/**
 * Keyboard Shortcuts Help Component
 * 
 * Displays available keyboard shortcuts
 */

import { Keyboard } from 'lucide-react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { HOTKEY_INFO } from '@/hooks/useGlobalHotkeys';

export function KeyboardShortcuts() {
  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Keyboard className="w-5 h-5" />
          键盘快捷键
        </CardTitle>
        <CardDescription>
          使用快捷键提升操作效率
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div className="space-y-3">
          {HOTKEY_INFO.map((item, index) => (
            <div
              key={index}
              className="flex items-center justify-between py-2 border-b last:border-0"
            >
              <span className="text-sm text-muted-foreground">
                {item.description}
              </span>
              <div className="flex gap-1">
                {item.keys.map((key, i) => (
                  <Badge
                    key={i}
                    variant="outline"
                    className="font-mono text-xs px-2"
                  >
                    {key}
                  </Badge>
                ))}
              </div>
            </div>
          ))}
        </div>

        <div className="mt-4 p-3 bg-muted rounded-md text-xs text-muted-foreground">
          💡 提示：在 macOS 上使用 Cmd 键，在 Windows/Linux 上使用 Ctrl 键
        </div>
      </CardContent>
    </Card>
  );
}
